Estoy tratando de hacer que los datos dinámicos en un gráfico Chart.js, pero ¿cómo hago que el gráfico esté disponible para una función de alternancia?
El gráfico se muestra bien, pero luego no puedo actualizarlo en absoluto. Creo que esto se debe al alcance. ¿Cómo devuelvo los objetos Chart.js a la función principal?
El código:
import React, { useContext, useEffect, useState } from "react"; import "./questions_trends.css"; import axios from 'axios'; import ReactTooltip from 'react-tooltip'; import { Chart } from "chart.js"; function Trends(){ const user_context = useContext(UserContext) const [positiveChart, setPositiveChart] = React.useState(undefined); function makeChart(data){ // Create the trends chart // positive_trend = setPositiveChart = new Chart('positiveChart', { type: 'bar', data: { labels: data.positive, datasets: [ { label: 'Team Positive', data: data.team_positive, backgroundColor: data.color }, { label: 'You Positive', data: data.positive, backgroundColor: data.color }] }, options: { } }); } function toggle(value) { if(positiveChart.isDatasetVisible(value)){ positiveChart.hide(value) } if(!positiveChart.isDatasetVisible(value)){ positiveChart.show(value) } } useEffect( async () => { let result = await axios.get("/api/monthly_tones") makeChart(result.data) }, []); useEffect( async () => { return positiveChart.destroy() }, []); //Render to Dom return ( <div className="question_positivity_container"> <canvas id="positiveChart" width="auto" height="70vh"></canvas> <button onClick={() => toggle(0)}>See All Cratic</button> </div> ); }; export default Trends; Las funciones de alternancia y useEffect no funcionan: TypeError: Cannot read properties of undefined (reading 'isDatasetVisible')
Creo que esto se debe a que positiveChart y engagedChart no están dentro de su alcance. ¿¿Cómo puedo solucionar esto??
Cualquier ayuda apreciada.
--- Actualizar
La solución requería usar un const chart = new Chart({}) dentro de la función makeChart() , y luego colocar el chart en un estado como este: setPositiveChart(chart) .
Eso actualizó el estado de la función e hizo que la variable estuviera disponible en todas partes.
Acepté la respuesta a continuación porque era el enfoque correcto y me llevó a la respuesta. ¡Gracias por la ayuda!
Su problema es que positiveChart no está dentro del alcance de sus otras funciones porque lo declara dentro makeChart . Para solucionarlo, debe tenerlo en el estado de uso de reacción de esta manera:
const [positiveChart, setPositiveChart] = React.useState(undefined); y luego dentro makeChart puedes usar setPositiveChart para crearlo. Posteriormente podrás acceder a él correctamente en tus funciones de useEffect .
Puede leer más sobre esto en los documentos de React sobre ganchos de estado.